<template>
  <div class="category-charts">
    <el-row :gutter="20">
      <!-- 问题类别饼图 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>问题类别</span>
              <el-icon><PieChartIcon /></el-icon>
            </div>
          </template>
          <div class="chart-container">
            <v-chart class="chart" :option="problemCategoryOption" @click="onProblemCategoryClick" autoresize />
          </div>
        </el-card>
      </el-col>

      <!-- 初筛饼图 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>初筛分布</span>
              <el-icon><DataAnalysis /></el-icon>
            </div>
          </template>
          <div class="chart-container">
            <v-chart class="chart" :option="initialScreeningOption" autoresize />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  
  <!-- 下钻：detail_desc 分布 -->
  <el-dialog v-model="detailDialogVisible" :title="`问题明细分布 - ${drillCategory}`" width="600px">
    <div style="height:360px">
      <v-chart class="chart" :option="detailDescOption" autoresize />
    </div>
  </el-dialog>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useAnrStore } from '../stores/anr'
import { storeToRefs } from 'pinia'
import { getCategoryDetailData } from '../api/anr'
import { PieChart as PieChartIcon, DataAnalysis } from '@element-plus/icons-vue'

const anrStore = useAnrStore()
const { categoryData, timeRange, customDateRange, selectedModels } = storeToRefs(anrStore)

// Problem category pie
const problemCategoryOption = computed(() => {
  const data = (categoryData.value && categoryData.value.problemCategory) || {}
  const base = {
    tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
    legend: { orient: 'vertical', left: 'left' }
  }
  const series = (data.series || []).map(s => ({
    ...s,
    radius: ['40%', '70%'],
    avoidLabelOverlap: true,
    label: { show: false, position: 'center' },
    emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
    labelLine: { show: true }
  }))
  return { ...base, series }
})

// Initial screening pie
const initialScreeningOption = computed(() => {
  const data = (categoryData.value && categoryData.value.initialScreening) || {}
  return {
    tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
    legend: { orient: 'vertical', left: 'left' },
    series: data.series || []
  }
})

// 下钻对话框状态与图表
const detailDialogVisible = ref(false)
const drillCategory = ref('')
const detailDescOption = ref({ series: [] })

const onProblemCategoryClick = async (params) => {
  if (!params || params.componentType !== 'series' || params.seriesType !== 'pie') return
  const category = params.name || '未知'
  drillCategory.value = category
  try {
    const data = await getCategoryDetailData({
      timeRange: timeRange.value,
      customDateRange: customDateRange.value,
      models: selectedModels.value,
      category
    })
    // 设为环形图
    const series = (data.series || []).map(s => ({
      ...s,
      radius: ['35%', '70%'],
      label: { show: false },
      labelLine: { show: true }
    }))
    detailDescOption.value = {
      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
      legend: { orient: 'vertical', left: 'left' },
      series
    }
    detailDialogVisible.value = true
  } catch (e) {
    console.error('加载下钻数据失败:', e)
    detailDialogVisible.value = false
  }
}
</script>

<style scoped>
.category-charts { margin-bottom: 20px; }
.chart-card { height: 400px; }
.card-header { display: flex; justify-content: space-between; align-items: center; font-weight: 500; }
.chart-container { height: 320px; width: 100%; }
.chart { height: 100%; width: 100%; }
</style>